ஜாவாஸ்கிரிப்ட் இறக்குமதி பண்புக்கூறுகள்: JSON மாட்யூல்களை ஏற்றுவதற்கான நவீன, பாதுகாப்பான வழி

பல ஆண்டுகளாக, ஜாவாஸ்கிரிப்ட் உருவாக்குநர்கள் ஒரு எளிய பணியுடன் போராடி வருகின்றனர்: JSON கோப்புகளை ஏற்றுவது. ஜாவாஸ்கிரிப்ட் ஆப்ஜெக்ட் நோட்டேஷன் (JSON) இணையத்தில் தரவுப் பரிமாற்றத்திற்கான ஒரு தரநிலையாக இருந்தாலும், அதை ஜாவாஸ்கிரிப்ட் மாட்யூல்களில் தடையின்றி ஒருங்கிணைப்பது என்பது பாய்லர்பிளேட், மாற்று வழிகள் மற்றும் சாத்தியமான பாதுகாப்பு அபாயங்கள் நிறைந்த பயணமாக இருந்தது. Node.js இல் உள்ள ஒத்திசைவான கோப்பு வாசிப்புகள் முதல் உலாவியில் உள்ள நீண்ட `fetch` அழைப்புகள் வரை, தீர்வுகள் சொந்த அம்சங்களை விட தற்காலிக இணைப்புகளாகவே உணர்த்தின. அந்த சகாப்தம் இப்போது முடிவடைகிறது.

இறக்குமதி பண்புக்கூறுகளின் உலகிற்கு வரவேற்கிறோம். இது ECMAScript மொழியை நிர்வகிக்கும் குழுவான TC39 ஆல் தரப்படுத்தப்பட்ட ஒரு நவீன, பாதுகாப்பான மற்றும் நேர்த்தியான தீர்வாகும். எளிமையான ஆனால் சக்திவாய்ந்த `with { type: 'json' }` தொடரியலுடன் அறிமுகப்படுத்தப்பட்ட இந்த அம்சம், ஜாவாஸ்கிரிப்ட் அல்லாத சொத்துக்களை, குறிப்பாக மிகவும் பொதுவான ஒன்றான JSON-ஐ நாம் கையாளும் முறையை புரட்சிகரமாக்குகிறது. இறக்குமதி பண்புக்கூறுகள் என்றால் என்ன, அவை தீர்க்கும் முக்கியமான சிக்கல்கள் மற்றும் தூய்மையான, பாதுகாப்பான மற்றும் திறமையான குறியீட்டை எழுத அவற்றை நீங்கள் இன்று எவ்வாறு பயன்படுத்தத் தொடங்கலாம் என்பது குறித்த விரிவான வழிகாட்டியை இந்த கட்டுரை உலகளாவிய உருவாக்குநர்களுக்கு வழங்குகிறது.

பழைய உலகம்: ஜாவாஸ்கிரிப்டில் JSON கையாளுதலைத் திரும்பிப் பார்த்தல்

இறக்குமதி பண்புக்கூறுகளின் நேர்த்தியை முழுமையாகப் பாராட்ட, அவை மாற்றியமைக்கும் சூழலை நாம் முதலில் புரிந்து கொள்ள வேண்டும். சூழலைப் பொறுத்து (சர்வர்-பக்கம் அல்லது கிளையன்ட்-பக்கம்), உருவாக்குநர்கள் பல்வேறு நுட்பங்களை நம்பியிருந்தனர், ஒவ்வொன்றும் அதன் சொந்த வர்த்தகங்களைக் கொண்டிருந்தன.

சர்வர்-பக்கம் (Node.js): `require()` மற்றும் `fs` சகாப்தம்

பல ஆண்டுகளாக Node.js-க்கு இயல்பான CommonJS மாட்யூல் அமைப்பில், JSON-ஐ இறக்குமதி செய்வது ஏமாற்றும் வகையில் எளிமையானது:

// ஒரு CommonJS கோப்பில் (எ.கா., index.js) const config = require('./config.json'); console.log(config.database.host);

இது அழகாக வேலை செய்தது. Node.js தானாகவே JSON கோப்பை ஒரு ஜாவாஸ்கிரிப்ட் ஆப்ஜெக்ட்டாக அலசும். இருப்பினும், ECMAScript மாட்யூல்களுக்கு (ESM) உலகளாவிய மாற்றத்துடன், இந்த ஒத்திசைவான `require()` செயல்பாடு நவீன ஜாவாஸ்கிரிப்டின் ஒத்திசைவற்ற, டாப்-லெவல்-அவைட் இயல்புடன் பொருந்தாததாக மாறியது. நேரடி ESM சமமான, `import`, ஆரம்பத்தில் JSON மாட்யூல்களை ஆதரிக்கவில்லை, இது உருவாக்குநர்களை பழைய, மேலும் கைமுறை முறைகளுக்குத் திரும்பும்படி கட்டாயப்படுத்தியது:

// ஒரு ESM கோப்பில் கைமுறை கோப்பு வாசிப்பு (எ.கா., index.mjs) import fs from 'fs'; import path from 'path'; const configPath = path.resolve('config.json'); const configFile = fs.readFileSync(configPath, 'utf8'); const config = JSON.parse(configFile); console.log(config.database.host);

இந்த அணுகுமுறை பல குறைபாடுகளைக் கொண்டுள்ளது:

• நீளம்: ஒரு செயல்பாட்டிற்கு பல வரிகள் பாய்லர்பிளேட் குறியீடு தேவைப்படுகிறது.
• ஒத்திசைவான I/O: `fs.readFileSync` ஒரு தடுக்கும் செயல்பாடு, இது உயர் ஒத்திசைவு பயன்பாடுகளில் செயல்திறன் தடையாக இருக்கலாம். ஒரு ஒத்திசைவற்ற பதிப்பு (`fs.readFile`) கால்பேக்குகள் அல்லது ப்ராமிஸ்களுடன் இன்னும் அதிக பாய்லர்பிளேட்டைச் சேர்க்கிறது.
• ஒருங்கிணைப்பு இல்லாமை: இது மாட்யூல் அமைப்பிலிருந்து துண்டிக்கப்பட்டதாக உணர்கிறது, JSON கோப்பை கைமுறையாக அலச வேண்டிய ஒரு பொதுவான உரை கோப்பாகக் கருதுகிறது.

கிளையன்ட்-பக்கம் (உலாவிகள்): `fetch` API பாய்லர்பிளேட்

உலாவியில், உருவாக்குநர்கள் ஒரு சேவையகத்திலிருந்து JSON தரவை ஏற்றுவதற்கு நீண்ட காலமாக `fetch` API-யை நம்பியுள்ளனர். இது சக்திவாய்ந்த மற்றும் நெகிழ்வானதாக இருந்தாலும், ஒரு நேரடியான இறக்குமதிக்கு இதுவும் நீளமானது.

// கிளாசிக் fetch முறை let config; fetch('/config.json') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); // JSON பாடியை அலசுகிறது }) .then(data => { config = data; console.log(config.api.key); }) .catch(error => console.error('Error fetching config:', error));

இந்த முறை, பயனுள்ளதாக இருந்தாலும், பின்வரும் சிக்கல்களைக் கொண்டுள்ளது:

• பாய்லர்பிளேட்: ஒவ்வொரு JSON ஏற்றுதலுக்கும் இதேபோன்ற ப்ராமிஸ்கள், ரெஸ்பான்ஸ் சரிபார்ப்பு மற்றும் பிழை கையாளுதல் தேவைப்படுகிறது.
• ஒத்திசைவற்றதன் கூடுதல் சுமை: `fetch`-இன் ஒத்திசைவற்ற தன்மையை நிர்வகிப்பது பயன்பாட்டு தர்க்கத்தை சிக்கலாக்கும், ஏற்றுதல் கட்டத்தை கையாள பெரும்பாலும் நிலை மேலாண்மை தேவைப்படுகிறது.
• நிலையான பகுப்பாய்வு இல்லை: இது ஒரு இயக்க நேர அழைப்பு என்பதால், பில்டு கருவிகளால் இந்த சார்புநிலையை எளிதில் பகுப்பாய்வு செய்ய முடியாது, இது மேம்படுத்தல்களைத் தவறவிடக்கூடும்.

ஒரு படி முன்னேற்றம்: கூற்றுகளுடன் டைனமிக் `import()` (முன்னோடி)

இந்த சவால்களை உணர்ந்து, TC39 குழு முதலில் இறக்குமதி கூற்றுகளை (Import Assertions) முன்மொழிந்தது. இது ஒரு தீர்வுக்கான குறிப்பிடத்தக்க படியாக இருந்தது, இது உருவாக்குநர்களுக்கு இறக்குமதி பற்றிய மெட்டாடேட்டாவை வழங்க அனுமதித்தது.

// அசல் இறக்குமதி கூற்றுகள் முன்மொழிவு const configModule = await import('./config.json', { assert: { type: 'json' } }); const config = configModule.default;

இது ஒரு பெரிய முன்னேற்றமாக இருந்தது. இது JSON ஏற்றுதலை ESM அமைப்பில் ஒருங்கிணைத்தது. `assert` பிரிவு, ஏற்றப்பட்ட வளம் உண்மையில் ஒரு JSON கோப்பு என்பதை சரிபார்க்க ஜாவாஸ்கிரிப்ட் இயந்திரத்திற்கு கூறியது. இருப்பினும், தரப்படுத்தல் செயல்பாட்டின் போது, ஒரு முக்கியமான சொற்பொருள் வேறுபாடு வெளிப்பட்டது, இது இறக்குமதி பண்புக்கூறுகளாக அதன் பரிணாமத்திற்கு வழிவகுத்தது.

இறக்குமதி பண்புக்கூறுகளின் வருகை: ஒரு அறிவிப்பு மற்றும் பாதுகாப்பான அணுகுமுறை

இயந்திர செயல்படுத்துபவர்களிடமிருந்து விரிவான விவாதம் மற்றும் பின்னூட்டத்திற்குப் பிறகு, இறக்குமதி கூற்றுகள் இறக்குமதி பண்புக்கூறுகளாக செம்மைப்படுத்தப்பட்டன. தொடரியல் நுட்பமாக வேறுபட்டது, ஆனால் சொற்பொருள் மாற்றம் ஆழமானது. இது JSON மாட்யூல்களை இறக்குமதி செய்வதற்கான புதிய, தரப்படுத்தப்பட்ட வழியாகும்:

நிலையான இறக்குமதி: import config from './config.json' with { type: 'json' };

டைனமிக் இறக்குமதி: const configModule = await import('./config.json', { with: { type: 'json' } }); const config = configModule.default;

`with` முக்கியச்சொல்: வெறும் பெயர் மாற்றத்தை விட அதிகம்

`assert`-இலிருந்து `with`-க்கு மாறியது வெறும் அழகுக்கான மாற்றம் அல்ல. இது நோக்கத்தின் அடிப்படை மாற்றத்தை பிரதிபலிக்கிறது:

• `assert { type: 'json' }`: இந்த தொடரியல் ஒரு ஏற்றத்திற்குப் பிந்தைய சரிபார்ப்பைக் குறிக்கிறது. இயந்திரம் மாட்யூலைப் பெற்று, பின்னர் அது கூற்றுடன் பொருந்துகிறதா என்று சரிபார்க்கும். பொருந்தவில்லை என்றால், அது ஒரு பிழையை வீசும். இது முதன்மையாக ஒரு பாதுகாப்புச் சரிபார்ப்பாக இருந்தது.
• `with { type: 'json' }`: இந்த தொடரியல் ஒரு ஏற்றத்திற்கு முந்தைய வழிகாட்டலைக் குறிக்கிறது. இது ஹோஸ்ட் சூழலுக்கு (உலாவி அல்லது Node.js) மாட்யூலை எவ்வாறு ஏற்றுவது மற்றும் தொடக்கத்திலிருந்தே அலசுவது பற்றிய தகவலை வழங்குகிறது. இது ஒரு சரிபார்ப்பு மட்டுமல்ல; இது ஒரு அறிவுறுத்தல்.

இந்த வேறுபாடு முக்கியமானது. `with` முக்கியச்சொல் ஜாவாஸ்கிரிப்ட் இயந்திரத்திடம், "நான் ஒரு வளத்தை இறக்குமதி செய்ய விரும்புகிறேன், மேலும் ஏற்றுதல் செயல்முறைக்கு வழிகாட்ட பண்புக்கூறுகளை உங்களுக்கு வழங்குகிறேன். சரியான ஏற்றி தேர்வு செய்யவும் மற்றும் தொடக்கத்திலிருந்தே சரியான பாதுகாப்பு கொள்கைகளைப் பயன்படுத்தவும் இந்த தகவலைப் பயன்படுத்தவும்" என்று கூறுகிறது. இது சிறந்த மேம்படுத்தல் மற்றும் உருவாக்குநருக்கும் இயந்திரத்திற்கும் இடையே ஒரு தெளிவான ஒப்பந்தத்தை அனுமதிக்கிறது.

இது ஏன் ஒரு கேம் சேஞ்சர்? பாதுகாப்பு கட்டாயம்

இறக்குமதி பண்புக்கூறுகளின் மிக முக்கியமான நன்மை பாதுகாப்பு. ரிமோட் கோட் எக்ஸிகியூஷனுக்கு (RCE) வழிவகுக்கும் MIME-வகை குழப்பம் எனப்படும் தாக்குதல்களைத் தடுக்க அவை வடிவமைக்கப்பட்டுள்ளன.

தெளிவற்ற இறக்குமதிகளால் ஏற்படும் RCE அச்சுறுத்தல்

ஒரு சேவையகத்திலிருந்து ஒரு உள்ளமைவுக் கோப்பை ஏற்றுவதற்கு டைனமிக் இறக்குமதி பயன்படுத்தப்படும் இறக்குமதி பண்புக்கூறுகள் இல்லாத ஒரு சூழ்நிலையை கற்பனை செய்து பாருங்கள்:

// சாத்தியமான பாதுகாப்பற்ற இறக்குமதி const { settings } = await import('https://api.example.com/user-settings.json');

`api.example.com` இல் உள்ள சேவையகம் சமரசம் செய்யப்பட்டால் என்ன হবে? ஒரு தீங்கிழைக்கும் நடிகர் `user-settings.json` எண்ட்பாயிண்டை ஒரு JSON கோப்புக்குப் பதிலாக ஒரு ஜாவாஸ்கிரிப்ட் கோப்பை வழங்கும்படி மாற்றலாம், அதே நேரத்தில் `.json` நீட்டிப்பை வைத்திருக்கலாம். சேவையகம் `Content-Type` ஹெட்டருடன் `text/javascript` என இயங்கக்கூடிய குறியீட்டை அனுப்பும்.

வகையை சரிபார்க்க ஒரு பொறிமுறை இல்லாமல், ஜாவாஸ்கிரிப்ட் இயந்திரம் ஜாவாஸ்கிரிப்ட் குறியீட்டைப் பார்த்து அதை இயக்கக்கூடும், இது தாக்குபவருக்கு பயனரின் அமர்வின் மீது கட்டுப்பாட்டைக் கொடுக்கும். இது ஒரு கடுமையான பாதுகாப்பு பாதிப்பு.

இறக்குமதி பண்புக்கூறுகள் இந்த அபாயத்தை எவ்வாறு குறைக்கின்றன

இறக்குமதி பண்புக்கூறுகள் இந்த சிக்கலை நேர்த்தியாக தீர்க்கின்றன. பண்புடன் இறக்குமதியை எழுதும்போது, நீங்கள் இயந்திரத்துடன் ஒரு கடுமையான ஒப்பந்தத்தை உருவாக்குகிறீர்கள்:

// பாதுகாப்பான இறக்குமதி const { settings } = await import('https://api.example.com/user-settings.json' with { type: 'json' });

இப்போது என்ன நடக்கிறது என்பது இங்கே:

1. உலாவி `user-settings.json`-ஐக் கோருகிறது.
2. இப்போது சமரசம் செய்யப்பட்ட சேவையகம், ஜாவாஸ்கிரிப்ட் குறியீடு மற்றும் `Content-Type: text/javascript` ஹெட்டருடன் பதிலளிக்கிறது.
3. உலாவியின் மாட்யூல் ஏற்றி, பதிலின் MIME வகை (`text/javascript`) இறக்குமதி பண்புக்கூறிலிருந்து எதிர்பார்க்கப்படும் வகையுடன் (`json`) பொருந்தவில்லை என்பதைக் காண்கிறது.
4. கோப்பை அலசுவதற்கு அல்லது இயக்குவதற்குப் பதிலாக, இயந்திரம் உடனடியாக ஒரு `TypeError`-ஐ வீசுகிறது, செயல்பாட்டை நிறுத்துகிறது மற்றும் எந்த தீங்கிழைக்கும் குறியீடும் இயங்குவதைத் தடுக்கிறது.

இந்த எளிய சேர்த்தல் ஒரு சாத்தியமான RCE பாதிப்பை ஒரு பாதுகாப்பான, கணிக்கக்கூடிய இயக்க நேரப் பிழையாக மாற்றுகிறது. இது தரவு தரவாகவே இருப்பதை உறுதிசெய்கிறது மற்றும் ஒருபோதும் தற்செயலாக இயங்கக்கூடிய குறியீடாக விளக்கப்படாது.

நடைமுறை பயன்பாட்டு வழக்குகள் மற்றும் குறியீட்டு எடுத்துக்காட்டுகள்

JSON-க்கான இறக்குமதி பண்புக்கூறுகள் ஒரு தத்துவார்த்த பாதுகாப்பு அம்சம் மட்டுமல்ல. அவை பல்வேறு களங்களில் அன்றாட மேம்பாட்டுப் பணிகளுக்கு பணிச்சூழலியல் மேம்பாடுகளைக் கொண்டுவருகின்றன.

1. பயன்பாட்டு உள்ளமைவை ஏற்றுதல்

இது கிளாசிக் பயன்பாட்டு வழக்கு. கைமுறை கோப்பு I/O-க்கு பதிலாக, இப்போது உங்கள் உள்ளமைவை நேரடியாகவும் நிலையானதாகவும் இறக்குமதி செய்யலாம்.

கோப்பு: `config.json` { "database": { "host": "db.production.example.com", "port": 5432, "user": "api_user" }, "featureFlags": { "newDashboard": true, "enableLogging": false } }

கோப்பு: `database.mjs` import config from './config.json' with { type: 'json' }; export function getDbHost() { return config.database.host; } console.log(`Connecting to database at: ${getDbHost()}`);

இந்த குறியீடு சுத்தமானது, அறிவிப்புத்தன்மை கொண்டது, மற்றும் மனிதர்கள் மற்றும் பில்டு கருவிகள் இரண்டிற்கும் புரிந்துகொள்ள எளிதானது.

2. சர்வதேசமயமாக்கல் (i18n) தரவு

மொழிபெயர்ப்புகளை நிர்வகிப்பது மற்றொரு சரியான பொருத்தம். நீங்கள் மொழி சரங்களை தனி JSON கோப்புகளில் சேமித்து, தேவைக்கேற்ப அவற்றை இறக்குமதி செய்யலாம்.

கோப்பு: `locales/en-US.json` { "welcomeMessage": "Hello, welcome to our application!", "logoutButton": "Log Out" }

கோப்பு: `locales/es-MX.json` { "welcomeMessage": "¡Hola, bienvenido a nuestra aplicación!", "logoutButton": "Cerrar Sesión" }

கோப்பு: `i18n.mjs` // இயல்புநிலை மொழியை நிலையானதாக இறக்குமதி செய்க import defaultStrings from './locales/en-US.json' with { type: 'json' }; // பயனர் விருப்பத்தின் அடிப்படையில் மற்ற மொழிகளை டைனமிக்காக இறக்குமதி செய்க async function getTranslations(locale) { if (locale === 'es-MX') { const module = await import('./locales/es-MX.json', { with: { type: 'json' } }); return module.default; } return defaultStrings; } const userLocale = 'es-MX'; const strings = await getTranslations(userLocale); console.log(strings.welcomeMessage); // ஸ்பானிஷ் செய்தியை வெளியிடுகிறது

3. வலை பயன்பாடுகளுக்கு நிலையான தரவை ஏற்றுதல்

ஒரு கீழ்தோன்றும் மெனுவை நாடுகளின் பட்டியலுடன் நிரப்புவதையோ அல்லது ஒரு தயாரிப்பு பட்டியலைக் காண்பிப்பதையோ கற்பனை செய்து பாருங்கள். இந்த நிலையான தரவை ஒரு JSON கோப்பில் நிர்வகித்து, உங்கள் கூறுகளில் நேரடியாக இறக்குமதி செய்யலாம்.

கோப்பு: `data/countries.json` [ { "code": "US", "name": "United States" }, { "code": "DE", "name": "Germany" }, { "code": "JP", "name": "Japan" } ]

கோப்பு: `CountrySelector.js` (கருதுகோள் கூறு) import countries from '../data/countries.json' with { type: 'json' }; export class CountrySelector { constructor(elementId) { this.element = document.getElementById(elementId); this.render(); } render() { const options = countries.map(country => `${country.name}` ).join(''); this.element.innerHTML = options; } } // பயன்பாடு new CountrySelector('country-dropdown');

உள்ளே இது எவ்வாறு செயல்படுகிறது: ஹோஸ்ட் சூழலின் பங்கு

இறக்குமதி பண்புக்கூறுகளின் நடத்தை ஹோஸ்ட் சூழலால் வரையறுக்கப்படுகிறது. இதன் பொருள் உலாவிகளுக்கும் Node.js போன்ற சர்வர்-பக்க இயக்க நேரங்களுக்கும் இடையே செயல்படுத்தலில் சிறிய வேறுபாடுகள் உள்ளன, இருப்பினும் முடிவு சீரானது.

உலாவியில்

ஒரு உலாவி சூழலில், செயல்முறை HTTP மற்றும் MIME வகைகள் போன்ற வலை தரங்களுடன் இறுக்கமாக இணைக்கப்பட்டுள்ளது.

1. உலாவி `import data from './data.json' with { type: 'json' }`-ஐ சந்திக்கும்போது, அது `./data.json`-க்கு ஒரு HTTP GET கோரிக்கையைத் தொடங்குகிறது.
2. சேவையகம் கோரிக்கையைப் பெற்று, JSON உள்ளடக்கத்துடன் பதிலளிக்க வேண்டும். முக்கியமாக, சேவையகத்தின் HTTP பதிலில் இந்த ஹெட்டர் இருக்க வேண்டும்: `Content-Type: application/json`.
3. உலாவி பதிலைப் பெற்று, `Content-Type` ஹெட்டரை ஆய்வு செய்கிறது.
4. அது ஹெட்டரின் மதிப்பை இறக்குமதி பண்புக்கூறில் குறிப்பிடப்பட்ட `type` உடன் ஒப்பிடுகிறது.
5. அவை பொருந்தினால், உலாவி பதிலின் பாடியை JSON ஆக அலசி, மாட்யூல் ஆப்ஜெக்டை உருவாக்குகிறது.
6. அவை பொருந்தவில்லை என்றால் (எ.கா., சேவையகம் `text/html` அல்லது `text/javascript` அனுப்பியது), உலாவி ஒரு `TypeError`-உடன் மாட்யூல் ஏற்றுதலை நிராகரிக்கிறது.

Node.js மற்றும் பிற இயக்க நேரங்களில்

உள்ளூர் கோப்பு முறைமை செயல்பாடுகளுக்கு, Node.js மற்றும் Deno MIME வகைகளைப் பயன்படுத்துவதில்லை. அதற்குப் பதிலாக, கோப்பை எவ்வாறு கையாள்வது என்பதைத் தீர்மானிக்க கோப்பு நீட்டிப்பு மற்றும் இறக்குமதி பண்புக்கூறின் கலவையை அவை நம்பியுள்ளன.

1. Node.js-இன் ESM ஏற்றி `import config from './config.json' with { type: 'json' }`-ஐப் பார்க்கும்போது, அது முதலில் கோப்புப் பாதையை அடையாளம் காண்கிறது.
2. அது `with { type: 'json' }` பண்பை அதன் உள் JSON மாட்யூல் ஏற்றியைத் தேர்ந்தெடுக்க ஒரு வலுவான சமிக்ஞையாகப் பயன்படுத்துகிறது.
3. JSON ஏற்றி வட்டில் இருந்து கோப்பு உள்ளடக்கங்களைப் படிக்கிறது.
4. அது உள்ளடக்கங்களை JSON ஆக அலசுகிறது. கோப்பில் தவறான JSON இருந்தால், ஒரு தொடரியல் பிழை வீசப்படுகிறது.
5. ஒரு மாட்யூல் ஆப்ஜெக்ட் உருவாக்கப்பட்டு, பொதுவாக அலசப்பட்ட தரவை `default` ஏற்றுமதியாகக் கொண்டு திருப்பி அனுப்பப்படுகிறது.

பண்பிலிருந்து இந்த வெளிப்படையான அறிவுறுத்தல் தெளிவின்மையைத் தவிர்க்கிறது. Node.js அதன் உள்ளடக்கத்தைப் பொருட்படுத்தாமல், கோப்பை ஜாவாஸ்கிரிப்டாக இயக்க முயற்சிக்கக்கூடாது என்பதை உறுதியாக அறிந்திருக்கிறது.

உலாவி மற்றும் இயக்க நேர ஆதரவு: இது தயாரிப்புக்குத் தயாரா?

ஒரு புதிய மொழி அம்சத்தை ஏற்றுக்கொள்வதற்கு இலக்கு சூழல்களில் அதன் ஆதரவை கவனமாகக் கருத்தில் கொள்ள வேண்டும். அதிர்ஷ்டவசமாக, JSON-க்கான இறக்குமதி பண்புக்கூறுகள் ஜாவாஸ்கிரிப்ட் சுற்றுச்சூழல் முழுவதும் விரைவான மற்றும் பரவலான தழுவலைக் கண்டுள்ளன. 2023-இன் பிற்பகுதியில், நவீன சூழல்களில் ஆதரவு சிறப்பானது.

• Google Chrome / Chromium Engines (Edge, Opera): பதிப்பு 117-இலிருந்து ஆதரிக்கப்படுகிறது.
• Mozilla Firefox: பதிப்பு 121-இலிருந்து ஆதரிக்கப்படுகிறது.
• Safari (WebKit): பதிப்பு 17.2-இலிருந்து ஆதரிக்கப்படுகிறது.
• Node.js: பதிப்பு 21.0-இலிருந்து முழுமையாக ஆதரிக்கப்படுகிறது. முந்தைய பதிப்புகளில் (எ.கா., v18.19.0+, v20.10.0+), இது `--experimental-import-attributes` கொடியின் கீழ் கிடைத்தது.
• Deno: ஒரு முற்போக்கான இயக்க நேரமாக, Deno இந்த அம்சத்தை (கூற்றுகளிலிருந்து உருவாகி) பதிப்பு 1.34-இலிருந்து ஆதரிக்கிறது.
• Bun: பதிப்பு 1.0-இலிருந்து ஆதரிக்கப்படுகிறது.

பழைய உலாவிகள் அல்லது Node.js பதிப்புகளை ஆதரிக்க வேண்டிய திட்டங்களுக்கு, Vite, Webpack (பொருத்தமான லோடர்களுடன்), மற்றும் Babel (ஒரு டிரான்ஸ்ஃபார்ம் செருகுநிரலுடன்) போன்ற நவீன பில்டு கருவிகள் மற்றும் பண்ட்லர்கள் புதிய தொடரியலை ஒரு இணக்கமான வடிவத்திற்கு மாற்றியமைக்க முடியும், இது இன்று நவீன குறியீட்டை எழுத உங்களை அனுமதிக்கிறது.

JSON-ஐத் தாண்டி: இறக்குமதி பண்புக்கூறுகளின் எதிர்காலம்

JSON முதல் மற்றும் மிக முக்கியமான பயன்பாட்டு வழக்காக இருந்தாலும், `with` தொடரியல் நீட்டிக்கக்கூடியதாக வடிவமைக்கப்பட்டுள்ளது. இது மாட்யூல் இறக்குமதிகளுடன் மெட்டாடேட்டாவை இணைப்பதற்கான ஒரு பொதுவான பொறிமுறையை வழங்குகிறது, மற்ற வகை ஜாவாஸ்கிரிப்ட் அல்லாத வளங்களை ES மாட்யூல் அமைப்பில் ஒருங்கிணைக்க வழி வகுக்கிறது.

CSS மாட்யூல் ஸ்கிரிப்டுகள்

அடுத்த பெரிய அம்சம் CSS மாட்யூல் ஸ்கிரிப்டுகள். இந்த முன்மொழிவு உருவாக்குநர்களுக்கு CSS ஸ்டைல்ஷீட்களை நேரடியாக மாட்யூல்களாக இறக்குமதி செய்ய அனுமதிக்கிறது:

import sheet from './styles.css' with { type: 'css' }; document.adoptedStyleSheets = [sheet];

ஒரு CSS கோப்பு இந்த வழியில் இறக்குமதி செய்யப்படும்போது, அது ஒரு `CSSStyleSheet` ஆப்ஜெக்ட்டாக அலசப்படுகிறது, அதை ஒரு ஆவணம் அல்லது ஷேடோ DOM-க்கு நிரல்ரீதியாகப் பயன்படுத்தலாம். இது வலைக் கூறுகள் மற்றும் டைனமிக் ஸ்டைலிங்கிற்கு ஒரு பெரிய பாய்ச்சலாகும், `